<template>
	<view style="display: flex;flex-direction: column;height: 100%;position: absolute;width: 100%;">
		<view style="padding: 20rpx;">
			<u-search placeholder="搜索" @click="goSousuo" :showAction="false" disabled></u-search>
		</view>
		<view style="flex-grow: 1; width: 100%;display: flex;background-color: #ccc;height: 0">
			<view class="left">
				<view :class="{item:true,active:index === current}" v-for="item,index in fl_data" :key="item._id" @click="changeCurrent(item,index)">{{item.title}}</view>
			</view>
			<view class="right">
				<view class="item" v-for="item,index in product_data" :key="item._id" @click="goInfo(item)">
					<image class="image" :src="item.image" mode="aspectFill"></image>
					<view class="item_info" >
						<view style="height: 100%;">
							<view class="title">{{item.title}}</view>
								<view style="color: #ff0000;font-weight: bold;" >
									<span style="font-size: 20rpx;">￥</span> <span>{{item.price}}</span>
								</view>
							<view style="color: #939393;font-size: 20rpx;margin-top: 12rpx;">库存{{item.inventory}}</view>
						</view>
						<view @click.stop="changeCurrentInfo(item)">
							<u-icon name="shopping-cart" size="30"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="product_data.length<=0">
					<u-empty
					        mode="data"
					        icon="https://cdn.uviewui.com/uview/empty/data.png"
							text="该分类暂无商品~"
					>
					</u-empty>
				</view>
			</view>
		</view>
		<sku-buy :show="show" :currentInfo="current_info" @close="show = false"></sku-buy>
	</view>
</template>

<script>
	import skuBuy from '@/components/skuBuy.vue'
	export default {
		components:{
			skuBuy
		},
		onLoad() {
			this.getFlData()
		},
		data() {
			return {
				fl_data:null,
				product_data:[],
				current:0,
				show:false,
				current_info:null
			}
		},
		methods: {
			changeCurrentInfo(item){
				this.current_info = item
				this.show  =true
			},
			changeCurrent(item,index){
				this.current = index
				this.getProductData(item._id)
			},
			async getFlData(){
				let res = await vk.callFunction({
					url: 'client/pages/fl/pub/fl_list',
					title: '芜湖'
				});
				console.log(res)
				this.fl_data = res.data
				
				this.getProductData(res.data[this.current]._id)
			},
			async getProductData(classification_id){
				let res = await vk.callFunction({
					url: 'client/pages/fl/pub/product_list',
					title: '芜湖',
					data:{
						classification_id
					}
				});
				console.log(res)
				this.product_data = res.data
			},
			goSousuo(){
				uni.navigateTo({
					url:'/pages/index/search/search'
				})
			},
			goInfo(item){
				uni.navigateTo({
					url:`/pages/product/product?product_id=${item._id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.left{
		background-color: #F7F7F7;
		overflow-y: scroll;
		
		.item{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			
			&.active{
				// border-left: 4rpx solid #FF4544;
				// color: #FF4544;
				box-shadow: inset 8rpx 0rpx 0rpx -4rpx #FF4544;
				color: #FF4544;
			}
		}
			
			
			
	}
	
	.right{
		background-color: white;
		overflow-y: scroll;
		flex-grow: 1;
		.item{
			display: flex;
			padding: 20rpx;
			.image{
				width: 160rpx;
				height: 160rpx;
			}
			
			.item_info{
				display: flex;align-items: center;
				justify-content: space-between;
				margin-left: 12rpx;
				font-size: 28rpx;
				flex-grow: 1;
				
				.title{
					margin-top: 15rpx;
					margin-bottom: 35rpx;
					max-width: 280rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
</style>
